<template>
    <div class="pagination">
        <el-pagination
            v-bind="props"
            @size-change="onHandleSizeChange"
            @current-change="onHandleCurrentChange"
            class="mt15"
            :pager-count="pagerCount"
            :page-sizes="pageSizes"
            v-model:current-page="pageData.tableParams.page_num"
            background
            v-model:page-size="pageData.tableParams.page_limit"
            :layout="layout"
            :total="pageData.tableParams.page_total"
        >
        </el-pagination>
    </div>
</template>

<script lang="ts" name="pagination" setup>
import {computed} from "vue"

interface Props {
    modelValue: {
        tableParams:{
            page_num: number
            page_limit: number
            page_total: number
        }
    }
    pageSizes?: number[]
    pagerCount?: number
    layout?: string
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: () => ({tableParams: {
            page_num: 1,
            page_limit: 15,
            page_total: 0
        }
    }),
    pageSizes: () => [15, 20, 30, 40],
    pagerCount: 7,
    layout: "prev, pager, next",
})

const emit = defineEmits(["update:modelValue", "tableChange"]);

const pageData = computed({
    get() {
        return props.modelValue
    },
    set(value) {
        emit('update:modelValue', value)
    }
})

const onHandleSizeChange = (val: number) => {
    pageData.value.tableParams.page_limit = val;
    emit('tableChange');
};

const onHandleCurrentChange = (val: number) => {
    pageData.value.tableParams.page_num = val;
    emit('tableChange');
};

</script>